<template>
  <div class="main">
    <PureTableBar class="list_hei" title="信用评级列表">
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          ref="tableRef" :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination"
          max-height="600" :row-selection="true" @current-change="handleCurrentChange" @size-change="handleSizeChange"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' text @click="newGrade(row)" v-if="!row.isCreditMeasurement">
              信用评级
            </el-button>
            <el-button type='primary' text @click="checkPor(row)" v-else>
              查看详情
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
  <!-- 弹窗新建信用评级 -->
  <ReDialog :width="600" :height="300" :models="dialogVisible" @Closes="cancelAlgro()">
    <template #header>
      <h2 style=" text-align: center;">信用评级窗口</h2>
    </template>
    <template #main>
      <el-form label-width="180px" ref="RefEntryPlatform">
        <el-form-item label="企业名称：">
          {{ formData.supName }}
        </el-form-item>
        <el-form-item label="选择评级模型：">
          <el-select placeholder="请选择" v-model="formData.acrmId" @change="changeAlgro()">
            <el-option v-for="item in algorOptionist" :key="item.algorithmResultId" :label="item.algorithmModelName"
              :value="item.algorithmResultId" />
          </el-select>
        </el-form-item>
        <el-form-item label="所需企业自变量X：">
          {{ formData.selectParams }}
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="saveCredit()"> 确定 </el-button>
        <el-button @click="cancelAlgro()"> 取消 </el-button>
      </span>
    </template>
  </ReDialog>
  <!-- 算法详情 -->
  <div class="show_Echar" v-if="tLoding">
    <div class="container">
      <div style="width:100%; display: flex; flex-direction: column;overflow: scroll;">
        <Draggle class="flexible-panel" :detailData="detailData" :showType="showType" :data="saveParams"
          :listComeData='listComeData' :financingApprovalId='!!listComeData ? "" : selectData.financingApprovalId'
          :acrmId="selectAcrmId" @closeNew="tLoding = false">
        </Draggle>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { useFincialCredit } from "./hooks/FincialcreditRating";
import { PureTableBar } from "@/components/RePureTableBar";
import Draggle from "./component/DraggleResult.vue"
const {
  columns,
  loading,
  dataList,
  pagination,
  tLoding,
  saveCredit,
  handleSizeChange,
  handleCurrentChange,
  dialogVisible,
  newGrade,
  checkPor,
  detailData,
  showType,
  formData,
  algorOptionist,
  changeAlgro,
  saveParams,
  selectData,
  listComeData,
  cancelAlgro,
  selectAcrmId
} = useFincialCredit()
</script>

<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);


.show_Echar {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  background-color: white;
  top: 0;
  z-index: 10;
  overflow: scroll;

  ._Echar_colse {
    position: absolute;
    right: 20px;
    top: 20px;

  }

  .echartes {
    width: 91%;
    height: 400px;
    margin: auto;
  }

  .echartstitle {
    text-align: center;
    font-size: 12px;
    padding: 10px 0;
    margin: 15px 0;
  }
}

.container {
  display: flex;
  width: 100%;
  padding: 10px;
}

.left-panel {
  flex: 15%;
}

.flexible-panel {
  flex: 1;
}


.top-title {
  margin-right: 2px
}

.itxst {
  margin: 10px auto;
  width: 30%;
  float: left;
  margin-right: 10px;
  min-height: 120px
}

.itxst div {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}

#msg {
  clear: both;
  width: 100%;
}

:deep(.el-form-item__label) {
  font-weight: 700
}
</style>
